<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="cvs" width="600px" height="400"></canvas>
</body>
<script>
    const cvsDom = document.querySelector("#cvs")   
    
    const context = cvsDom.getContext("2d")

    context.beginPath()  

    context.arc(150, 150, 100, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.stroke();  

    context.beginPath();
    context.arc(120, 150, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.fillStyle = 'black';
    // context.strokeStyle = 'black';
    context.fill();
    context.stroke();
    // context.stroke();



    context.beginPath();
    context.arc(190, 150, 10, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
    context.fillStyle = 'black';
     context.fill();
    context.stroke();


    context.beginPath();
    context.arc(150, 180, 40, 57, Math.PI * 10 / 12, false)
    context.fillStyle = 'teal';
    context.strokeStyle = 'black';
    context.stroke();


</script>

</html>
<style>
    #cvs {
        border: 1px solid black;
    }
</style>